<template>
  <div class="chj_order">
    <h3 class="cal_mall_tit"><img src="~/assets/img/cal_index_ddzx.png">订单中心</h3>
    <div class="hh-grzx">


      <div class="ddzx2">
        <div class="top">
          <ul class="af">
              <li @mouseover=qh(0) :class="select==0?'select':''">全部订单</li>
              <li @mouseover=qh(1) :class="select==1?'select':''">展示中订单</li>
              <li @mouseover=qh(2) :class="select==2?'select':''">过期订单</li>
          </ul>
        </div>
        <div class="ct">
          <div class="ctno"><img src="~/assets/img/ddzx-no.png" width="254px" height="179px">
            <p>还没有任何订单呢 <br><a href="javascript:;">去挑选好物&gt;&gt;</a></p>
          </div>
          <div class="ct2">
            <table>
              <thead>
                <tr class="tr1">
                  <th class="th1">序号</th>
                  <th class="th2">展示位名称</th>
                  <th class="th3">订单号</th>
                  <th class="th4">支付积分</th>
                  <th class="th5">购买日期</th>
                  <th class="th6">有效期至</th>
                  <th class="th7">状态 </th>
                  <th class="th8">操作 </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(data,id) in dingdan.showNumOrderRes?dingdan.showNumOrderRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">
                  <td class="th1 td1">{{id+1}}</td>
                  <td class="th2 td2">{{data.servicename}}</td>
                  <td class="th3 td3">{{data.ordernumber}}</td>
                  <td class="th4 td4" style="color:#018E57 !important">-{{data.payscore}}</td>
                  <td class="th5 td5">{{data.buytime}}</td>
                  <td class="th6 td6">{{data.endtime}}</td>
                  <td class="th7 td7" :style="data.orderstatus==1?'color:#00B785 !important':'color:#7C8396 !important'">{{data.orderstatus==1?'展示中':'已过期'}}</td>
                  <td class="th8 td8"><a href="javascript:;" @click="data.orderstatus==1?tzlj(data.sid,data.pid):dkgm(data.uid,data.sid)">{{data.orderstatus==1?'查看详情':'再次购买'}}</a></td>
                </tr>
              </tbody>
            </table>
            <div class="dba" :style="this.dingdan.showNumOrderRes?'':'display:none'">
              <span>{{this.dingdan.countNum}}条</span>
              <a href="javascript:;" class="syy" @click="syy">上一页</a>
              <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a>
              <a href="javascript:;" class="xyy" @click="xyy">下一页</a>
            </div>
              <div style="position: relative; top: 150px; text-align: center;font-size: 18px;color: #666;" :style="this.dingdan.showNumOrderRes?'display:none':''">
                <img src="~/assets/img/ddzx-no.png" alt="无订单信息" title="无订单信息">
                <p style="font-size: 20px;color: #aaaaaa;margin-top: 10px;">还没有任何订单呢</p>
                <a style="color: #1972EA;" href="/CpersonalCenter/Cmall?idx=1">去挑选好物>></a>
              </div>
          </div>
        </div>
      </div>

    </div>
    <div class="tc" style="display: none">
      <span>×</span>
      {{tcmsg}}
    </div>
    <div class="gmtc" :class="goumai.select==0?'':'select'">
      <div class="ct">
        <h3>{{goumai.title}}(展示位)</h3>
        <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
        <p class="p2">{{goumai.title}}(展示位)</p>
        <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
        <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
        <a href="javascript:;" class="close" @click="gmgb()"></a>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        select:0,
        title:null,
        shuju:null,
        dingdan:[],
        tcmsg:'',
        sl2:[1],
        sl3:0,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }
      }
    },
    async asyncData ({req,params,query}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let a5 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/allShowNumOrder?userid='+cookie;
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    // let gr2 = await axios.get(a6);
    let nh5 = await axios.get(a5);
    let nh6 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/inDisplayShowNumOrder?userid=`+cookie);
    let nh7 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/overdueShowNumOrder?userid=`+cookie);
    let data  = {qbdd:nh5.data,gr:gr.data,zszdd:nh6.data,gqdd:nh7.data,id:cookie};
    return { title: data}
  },
    mounted:function(){
      this.qh(0)
      if(this.title.gr == 'go_signin'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userid_error'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_is_null'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_banuse'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }
      else if(this.title.gr == 'serviceid_is_null'){
        window.open('/cOrder',_self);
      } else if(this.title.gr == 'serviceid_error'){
        window.open('/cOrder',_self);
      }else if(this.title.gr == 'serviceinfo_is_null'){
        window.open('/cOrder',_self);
      }else if(this.title.gr == 'serviceinfo_banuse'){
        window.open('/cOrder',_self);
      }
      $(document).ready(function(){
        $('.jftca').click(function(){
          $('.jfgztc').addClass('select');
        });
        $('.jfgztc .close').click(function(){
          $('.jfgztc').removeClass('select');
        });

      })

      if(this.$route.query.name == 'all'){
        this.dingdan = this.title.qbdd;
        this.select = 0;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.qbdd.showNumOrderRes?this.title.qbdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'now'){
        this.select = 1;
        this.sl2 = [1];
        this.dingdan = this.title.zszdd;
        let nb = Math.ceil(this.title.zszdd.showNumOrderRes?this.title.zszdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'overdue'){
        this.select = 2;
        this.dingdan = this.title.gqdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.gqdd.showNumOrderRes?this.title.gqdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }

      if(this.select == 0){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li1').addClass('select');
      }else if(this.select == 1){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li2').addClass('select');
      }else if(this.select == 2){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li3').addClass('select');
      }


    },


  watch:{
    select:function(){
      if(this.select == 0){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li1').addClass('select');
      }else if(this.select == 1){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li2').addClass('select');
      }else if(this.select == 2){
        $('.nrct .left div li').removeClass('select');
        $('.nrct .left .div4 .li3').addClass('select');
      }
    }
    ,
    // foobar:function(){
    //   if(this.foobar){
    //     this.select = this.foobar;
    //   }
    //
    // },
    "$route": function(){
      //路由变化会触发
      if(this.$route.query.name == 'all'){
        this.select = 0;
        this.dingdan = this.title.qbdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.qbdd.showNumOrderRes?this.title.qbdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'now'){
        this.select = 1;
        this.dingdan = this.title.zszdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.zszdd.showNumOrderRes?this.title.zszdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'overdue'){
        this.select = 2;

        this.dingdan = this.title.gqdd;
        this.sl2 = [1];
        let nb = Math.ceil(this.title.gqdd.showNumOrderRes?this.title.gqdd.showNumOrderRes.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }


      }
    }
  },
    methods:{
      qh:function(e){
        this.select = e;
        if(e==0){
          this.dingdan = this.title.qbdd;
        }else if(e==1){
          this.dingdan = this.title.zszdd;
        }else if(e==2){
          this.dingdan = this.title.gqdd;

        }
      },
      syy:function(){
        if(this.sl3>0){
          this.sl3 = this.sl3-1;
        }
      },
      xyy:function(){
        var nb =  Math.ceil(this.dingdan.showNumOrderRes?this.dingdan.showNumOrderRes.length/10:0);
        if(this.sl3<nb-1){
          this.sl3= this.sl3+1;
        }
      },
      qh2:function(e){
        this.sl3= e;
      },
      gmgb:function(){

        this.goumai.select = 0;
      },
      dkgm:function(e1,e2){
        var _this = this;
        this.goumai.select = 1;
        _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
          params:{
            userid:e1,
            serviceid:e2
          }
        })
          .then(function(response){
            _this.goumai.title = response.data.servicename;
            _this.goumai.jifen = response.data.buyneedscore;
            _this.goumai.userjf = response.data.userscore;
            _this.goumai.id = e2;


          });

      },
      gmjf:function(e1,e2){
        var _this = this;
        var sj;
        sj = 'userid='+e1+'&serviceid='+e2;
        _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
          .then(function(response){
            _this.goumai.select = 0;
            // alert(response.data);
            _this.tcmsg= response.data;
            $('.right .tc').addClass('select');
            setTimeout(function(){
              //your codes
              window.location.reload()
            },800);


          });
      },
      tzlj:function(e,e2){
        // this.$router.push('/ServiceDetails/'+e+'?name='+e2);
        let herf = '/ServiceDetails/'+e+'?name='+e2;
        window.open(herf,'_blank')
      }
    }
  }
</script>

<style scoped="scoped">
  .hh-grzx{
    background: none;
  }
</style>
